<!DOCTYPE html>
<html lang="en" class="x-admin-sm">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>新增网站用户信息</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" media="all" />
    <script type="text/javascript" src="./assets/layui/layui.js"></script>
</head>

<body class="childrenBody">
    <div id="app">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
            <legend>新增网站用户信息</legend>
        </fieldset>
        <div class="layui-form" style="width: 80%;">
            <div class="layui-form-item"><label class="layui-form-label">用户名</label>
                <div class="layui-input-block"><input type="text" class="layui-input" id="username" v-model="username"
                        placeholder="请输入用户名" />
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">密码</label>
                <div class="layui-input-block"><input type="password" class="layui-input" id="password" v-model="password"
                        placeholder="请输入密码" />
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">姓名</label>
                <div class="layui-input-block"><input type="text" class="layui-input" id="realname" v-model="realname"
                        placeholder="请输入姓名" />
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">性别</label>
                <div class="layui-input-block">
                    <input type="radio" name="sex" value="男" title="男" id="sex-1" v-model="sex">
                    <input type="radio" name="sex" value="女" title="女" id="sex-2" v-model="sex">
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">出生日期</label>
                <div class="layui-input-block"><input type="text" class="layui-input" id="birthday" v-model="birthday"
                        placeholder="请输入出生日期" @click="getDate4()" readonly="readonly" autocomplete="off" />
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">联系方式</label>
                <div class="layui-input-block"><input type="text" class="layui-input" id="contact" v-model="contact"
                        placeholder="请输入联系方式" />
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">提示问题</label>
                <div class="layui-input-block">
                    <select name="asksid" id="asksid" title="提示问题" id="asksid">
                    </select>
                </div>
            </div>
            <div class="layui-form-item"><label class="layui-form-label">问题答案</label>
                <div class="layui-input-block"><input type="text" class="layui-input" id="answer" v-model="answer"
                        placeholder="请输入问题答案" />
                </div>
            </div>
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" @click.prevent="save()">提交保存</button>
                    <button class="layui-btn" @click.prevent="reset()">取消重置</button>
                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript" src="./assets/js/axios.min.js"></script>
    <script type="text/javascript" src="./assets/js/vue.js"></script>
    <script type="text/javascript" src="./assets/js/jquery.min.js"></script>
    <script type="text/javascript">
		const vue = new Vue({ // 实例化Vue对象
			el: '#app',// 绑定作用域
			data: { //定义数据
				username: '', // 定义用户名数据
				password: '', // 定义密码数据
				realname: '', // 定义姓名数据
				sex: '男', // 定义性别数据
				birthday: '', // 定义出生日期数据
				contact: '', // 定义联系方式数据
				asksid: '0', // 定义提示问题数据
				answer: '', // 定义问题答案数据
			},
			methods: {
				save: function () {
					let _this = this;
					var data = {
						username: _this.username,
						password: _this.password,
						realname: _this.realname,
				sex: $('input:radio[name=sex]:checked').val(), // 性别
						birthday: _this.birthday,
						contact: _this.contact,
						asksid: $('#asksid').val(),
						answer: _this.answer,
					};
					axios.post('http://localhost:8080/vue_gxhfztjxt/users/insertUsers.action', data).then(result => {
						if (result.data.code > 0) {
							if (window.confirm('保存成功,是否继续添加？')) {
								_this.reset();
							} else {
								var index = parent.layer.getFrameIndex(window.name);
								parent.location.reload();
								parent.layer.close(index);
							}
						} else {
							console.log('保存失败,请稍后再试');
						}
					});
				},
				reset: function () {
					this.pageLoad();
				},
				pageLoad: function () { // 页面加载
					this.username= '';
					this.password= '';
					this.realname= '';
					this.sex= '男';
					this.birthday= '';
					this.contact= '';
					this.answer= '';
				},
				validate: function () { // 验证输入非空
				},
				getDate4: function () { // 日历点击事件
                    var _this = this;
                    layui.use('laydate', function() {
                        var laydate = layui.laydate;
                        laydate.render({
                            elem: '#birthday',
                            show: true,
                            done: function(value) {
                                _this.birthday = value;
                            }
                        })
                    })
				},
			},
			created() { // 生命周期相关的函数
				let _this = this;
              layui.use(['element', 'layer', 'form'], function() {
                $ = layui.jquery; // jquery
              });
				axios.get('http://localhost:8080/vue_gxhfztjxt/asks/getAllAsks.action').then(result => {
					var myOptions = '<option value="">---请选择提示问题---</option>';
					for (var i = 0; i < result.data.length; i++) {
                      myOptions += '<option value="' + result.data[i].asksid + '">' + result.data[i].questions + '</option>';
					}
					$("#asksid").empty();
					$("#asksid").html(myOptions);
				});
				_this.pageLoad();
			},
		})
	</script>

</body>

</html>


